<template>
	<view class="sight-detail-container">
		<!-- 加载中状态 -->
		<view v-if="loading" class="loading-container">
			<uni-icons type="spinner-cycle" size="40" color="#007aff" animation="spin"></uni-icons>
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 景点详情内容 -->
		<view v-else-if="sightDetail" class="detail-content">
			<!-- 景点图片轮播 -->
			<swiper class="swiper" indicator-dots circular autoplay interval="3000">
				<swiper-item v-for="(image, index) in sightDetail.images" :key="index">
					<image :src="trimImageUrl(image)" mode="aspectFill" class="swiper-image"></image>
				</swiper-item>
			</swiper>
			
			<!-- 景点基本信息 - 按设计图片样式 -->
			<view class="basic-info">
				<text class="sight-name">{{ sightDetail.name }}</text>
				<view class="tag">
					<uni-icons type="star-filled" size="20" color="#fff"></uni-icons>
					{{ sightDetail.rating }}
				</view>
				
				<view class="info-row">
					<uni-icons type="calendar" size="20" color="#666"></uni-icons>
					<text class="info-text">{{ sightDetail.openTime || '3天 (2019年3月20日至22日)' }}</text>
				</view>

				<!-- 立即购买按钮 -->
				
			</view>
			
			<!-- 选项卡切换 -->
			<view class="tabs">
				<view class="tab-item" :class="{ active: activeTab === 'intro' }" @click="activeTab = 'intro'">介绍</view>
				<view class="tab-item" :class="{ active: activeTab === 'ticket' }" @click="activeTab = 'ticket'">门票</view>
				<view class="tab-item" :class="{ active: activeTab === 'comment' }" @click="activeTab = 'comment'">评论</view>
			</view>
			
			<!-- 选项卡内容 -->
			<view class="tab-content">
				<!-- 介绍内容 -->
				<view v-if="activeTab === 'intro'" class="intro-content">
					<view class="section">
						<text class="section-title">景点介绍</text>
						<text class="description">{{ sightDetail.description || '暂无介绍' }}</text>
					</view>
					
					<view class="section">
						<text class="section-title">设施服务</text>
						<view class="facilities" v-if="sightDetail.facilities && sightDetail.facilities.length > 0">
							<view 
								v-for="(facility, index) in sightDetail.facilities" 
								:key="index" 
								class="facility-item"
							>
								<uni-icons type="checkmark-circle" size="16" color="#07C160"></uni-icons>
								<text class="facility-text">{{ facility }}</text>
							</view>
						</view>
						<view v-else class="empty-text">暂无设施信息</view>
					</view>
					
					<view class="section">
						<text class="section-title">参观须知</text>
						<text class="notice">{{ sightDetail.notice || '暂无须知' }}</text>
					</view>
				</view>
				
				<!-- 门票内容 -->
				<view v-if="activeTab === 'ticket'" class="ticket-content">
					<view v-if="ticketsLoading" class="loading-container">
						<uni-icons type="spinner-cycle" size="30" color="#007aff" animation="spin"></uni-icons>
						<text class="loading-text">加载门票中...</text>
					</view>
					
					<view v-else-if="ticketsError" class="error-container">
						<uni-icons type="close-circle" size="40" color="#E64340"></uni-icons>
						<text class="error-text">{{ ticketsError }}</text>
						<button class="retry-btn" @click="getTickets">重试</button>
					</view>
					
					<view v-else-if="tickets.length > 0">
						<ticket-item 
							v-for="ticket in tickets" 
							:key="ticket.ticketId"
							:ticketId="ticket.ticketId"
							:sightId="ticket.sightId"
							:price="ticket.price"
							:stock="ticket.stock"
							:desc="ticket.desc"
							:ticketType="ticket.ticketType"
							:sourceChannel="ticket.sourceChannel"
							:saleStartTime="ticket.saleStartTime"
							:saleEndTime="ticket.saleEndTime"
							:status="ticket.status"
							:createdAt="ticket.createdAt"
							:updatedAt="ticket.updatedAt"
							@buy="handleTicketBuy"
						/>
					</view>
					
					<view v-else class="empty-tickets">
						<text>暂无门票信息</text>
					</view>
				</view>
				
			<!-- 评论内容 -->
			<view v-if="activeTab === 'comment'" class="comment-content">
				<!-- 评论统计 -->
				<view class="comment-stats" v-if="commentStats">
					<view class="stats-left">
						<uni-icons type="chat" size="20" color="#007aff"></uni-icons>
						<text class="stats-count">全部评论 ({{ commentStats.totalComments }})</text>
					</view>
					<view class="stats-divider"></view>
				</view>
				
				<!-- 评论列表 -->
				<view class="comments-list">
					<view v-if="commentsLoading" class="comments-loading">
						<uni-icons type="spinner-cycle" size="30" color="#007aff" animation="spin"></uni-icons>
						<text>加载评论中...</text>
					</view>
					
					<view v-else-if="comments.length > 0" class="comments">
						<view v-for="comment in comments" :key="comment.commentId" class="comment-item">
							<image :src="formatAvatar(comment.avatar)" mode="aspectFill" class="comment-avatar"></image>
							<view class="comment-body">
								<view class="comment-header">
									<text class="comment-username">{{ comment.username || '匿名用户' }}</text>
									<text class="comment-time">{{ formatDate(comment.createdAt) }}</text>
								</view>
								<text class="comment-content-text">{{ comment.content }}</text>
							</view>
						</view>
					</view>
					
					<view v-else class="empty-comments">
						<uni-icons type="chat-filled" size="60" color="#e0e0e0"></uni-icons>
						<text class="empty-text">暂无评论</text>
						<text class="empty-tip">快来发表第一条评论吧！</text>
					</view>
				</view>
				
				<!-- 评论输入 -->
				<view class="comment-input-section">
					<view class="input-card">
						<view class="comment-input-header">
							<image :src="formatAvatar(currentUser.avatar)" mode="aspectFill" class="user-avatar"></image>
							<view class="user-info">
								<text class="username">{{ currentUser.username || '用户' }}</text>
								<text class="user-tip">分享您的体验</text>
							</view>
						</view>
						<textarea 
							v-model="commentContent" 
							placeholder="说说您的想法..." 
							placeholder-style="color: #c0c0c0"
							class="comment-input"
							maxlength="500"
							auto-height
						/>
						<view class="input-footer">
							<text class="char-count">{{ commentContent.length }}/500</text>
							<button @click="submitComment" class="submit-btn" :disabled="!commentContent.trim()">
								<uni-icons type="chatbubble" size="16" color="#fff"></uni-icons>
								<text>发布</text>
							</button>
						</view>
					</view>
				</view>
			</view>
			</view>
				<!-- 购买按钮 -->
			<view class="buy">
				<buy-button :tickets="tickets"></buy-button>
			</view>
		</view>

	
		
		<!-- 错误提示 -->
		<view v-else class="error-container">
			<uni-icons type="close-circle" size="60" color="#E64340"></uni-icons>
			<text class="error-text">{{ errorMsg || '无法加载景点信息' }}</text>
			<button class="retry-btn" @click="getSightData">重试</button>
		</view>
	</view>
	
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import sightApi from '@/common/api/sight.js';
import commentApi from '@/common/api/comment.js';
import ticketApi from '@/common/api/ticket.js';
// 创建响应式变量
const sightId = ref('')
const sightDetail = ref(null)
const loading = ref(false)
const errorMsg = ref('')
const activeTab = ref('intro') // 默认显示介绍标签

// 门票相关变量
const tickets = ref([])
const ticketsLoading = ref(false)
const ticketsError = ref('')

// 评论相关变量
const comments = ref([])
const commentsLoading = ref(false)
const commentContent = ref('')
const currentUser = ref({
	userId: (() => {
		const userInfo = uni.getStorageSync('userInfo');
		return userInfo ? (userInfo.userId || userInfo.id || userInfo.user_id) : '';
	})(),
	username: (() => {
		const userInfo = uni.getStorageSync('userInfo');
		return (userInfo ? userInfo.username : '') || '黎民';
	})(),
	avatar: (() => {
		const userInfo = uni.getStorageSync('userInfo');
		return (userInfo ? userInfo.avatar : '') || '';
	})()
})
const commentStats = ref({
	totalComments: 0
})

// 格式化头像URL，去除多余的反引号和空格，如果没有头像则使用默认图片
const formatAvatar = (avatar) => {
	if (!avatar) return '../../static/logo.png';
	// 去除前后的反引号和空格
	return avatar.replace(/[`\s]/g, '') || '../../static/logo.png';
}

// 使用onLoad生命周期钩子接收路由参数并获取数据
onLoad((options) => {
	if (options && options.sightId) {
		sightId.value = options.sightId
		getSightData()
	} else {
		errorMsg.value = '未收到景点ID参数'
		loading.value = false
	}
})

// 监听选项卡变化
watch(() => activeTab.value, (newTab) => {
	// 当切换到评论选项卡时加载评论
	if (newTab === 'comment' && sightId.value) {
		getComments()
	}
	// 当切换到门票选项卡时加载门票
	if (newTab === 'ticket' && sightId.value) {
		getTickets()
	}
})

// 获取景点详情数据
const getSightData = async () => {
	loading.value = true
	errorMsg.value = ''
	sightDetail.value = null
	
	try {
		// 调用API获取景点详情
		const res = await sightApi.getSightDetail(sightId.value)
		console.log('API返回结果:', res)
		
		// 验证API返回格式并处理数据
		if (res && res.status === 'success' && res.data) {
			// 直接使用返回的data作为景点详情
			sightDetail.value = res.data
			console.log('成功获取景点详情:', sightDetail.value)
			
			// 获取景点详情后立即加载门票数据，而不仅限于切换到门票选项卡时
			await getTickets()
		} else {
			errorMsg.value = '获取景点信息失败'
			console.error('API返回结构异常:', res)
		}
	} catch (error) {
		errorMsg.value = '网络请求失败'
		console.error('获取景点详情失败:', error)
	} finally {
		loading.value = false
	}
}

// 获取门票列表
const getTickets = async () => {
	ticketsLoading.value = true
	ticketsError.value = ''
	try {
		// 调用API获取门票数据
	console.log(sightId.value)
	const response = await ticketApi.getTickets({sightId: sightId.value})
	console.log('门票API响应:', response)
		
		// 处理响应数据
		if (response && (response.code === 200 || response.status === 'success') && response.data) {
			if (Array.isArray(response.data.list)) {
				tickets.value = response.data.list
			} else if (Array.isArray(response.data)) {
				tickets.value = response.data
			}
		} else {
			// 设置模拟数据以便在无法获取真实数据时展示UI样式
			tickets.value = [
				{
					ticketId: 1,
					sightId: sightId.value,
					price: 120,
					stock: 100,
					desc: '成人标准票，包含景区内所有景点',
					ticketType: 'adult',
					sourceChannel: 'official',
					saleStartTime: new Date().toISOString(),
					saleEndTime: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
					status: 'active',
					createdAt: new Date().toISOString(),
					updatedAt: new Date().toISOString()
				},
				{
					ticketId: 2,
					sightId: sightId.value,
					price: 60,
					stock: 50,
					desc: '儿童票，适用于6-18岁未成年人',
					ticketType: 'child',
					sourceChannel: 'official',
					saleStartTime: new Date().toISOString(),
					saleEndTime: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
					status: 'active',
					createdAt: new Date().toISOString(),
					updatedAt: new Date().toISOString()
				}
			]
		}
	} catch (error) {
		console.error('获取门票列表失败:', error)
		ticketsError.value = '获取门票信息失败'
		// 设置模拟数据
		tickets.value = [
			{
				ticketId: 1,
				sightId: sightId.value,
				price: 120,
				stock: 100,
				desc: '成人标准票，包含景区内所有景点',
				ticketType: 'adult',
				sourceChannel: 'official',
				saleStartTime: new Date().toISOString(),
				saleEndTime: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
				status: 'active',
				createdAt: new Date().toISOString(),
				updatedAt: new Date().toISOString()
			}
		]
	} finally {
		ticketsLoading.value = false
	}
}
// 获取评论列表
const getComments = async () => {
	commentsLoading.value = true
	try {
		// 使用之前配置的getSightComments API获取景点评论
		const response = await commentApi.getSightComments(sightId.value, {
			page: 1,
			pageSize: 10
		})
		
		console.log('评论API响应:', response)
		
		// 处理响应数据 - 修改条件判断，适配API返回格式
		if (response && (response.code === 200 || response.status === 'success') && response.data) {
			if (Array.isArray(response.data.list)) {
				comments.value = response.data.list
				// 更新评论统计信息
				commentStats.value = {
					totalComments: response.data.total || 4120
				}
			} else if (Array.isArray(response.data)) {
				comments.value = response.data
			}
		}
	} catch (error) {
		console.error('获取评论列表失败:', error)
		// 可以设置模拟数据以便在无法获取真实数据时展示UI样式
		comments.value = [
			{
				commentId: '1',
				username: '利奥·吉尔',
				avatar: '../../static/logo.png',
				content: '服务好，导游敬业！',
				rating: 5,
				createdAt: new Date().toISOString()
			}
		]
	} finally {
		commentsLoading.value = false
	}
}

// 处理购票
const handleTicketBuy = (ticketInfo) => {
	console.log('购票信息:', ticketInfo)
	// 检查用户是否登录
	const token = uni.getStorageSync('token')
	if (!token) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		})
		uni.navigateTo({ url: '/pages/login/login' })
		return
	}
	
	// 可以跳转到订单确认页面或直接创建订单
	uni.navigateTo({
		url: `/pages/orders/orders?ticketId=${ticketInfo.ticketId}&sightId=${ticketInfo.sightId}&price=${ticketInfo.price}&ticketType=${ticketInfo.ticketType}`
	})
}

// 提交评论
const submitComment = async () => {
	// 检查用户是否登录
	const token = uni.getStorageSync('token')
	if (!token) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		})
		uni.navigateTo({ url: '/pages/login/login' })
		return
	}
	
	// 检查评论内容
	if (!commentContent.value.trim()) {
		uni.showToast({
			title: '评论内容不能为空',
			icon: 'none'
		})
		return
	}
	
	// 从本地存储获取最新的用户信息
	const userInfo = uni.getStorageSync('userInfo')
	const userId = userInfo ? (userInfo.userId || userInfo.id || userInfo.user_id) : ''
	
	// 检查用户ID是否存在
	if (!userId) {
		uni.showToast({
			title: '用户信息异常，请重新登录',
			icon: 'none'
		})
		uni.navigateTo({ url: '/pages/login/login' })
		return
	}
	
	try {
		// 准备评论数据
		const commentData = {
			userId: userId,
			sightId: sightId.value,
			content: commentContent.value.trim()
		}
		
		// 调用API提交评论
		const response = await commentApi.addComment(commentData)
		console.log('评论提交响应:', response)
		
		// 检查响应是否成功
		if (response && (response.message === 'Add comment' || response.status === 'success' || (response.code && response.code === 200))) {
			// 清空输入框
			commentContent.value = ''
			
			// 重新获取评论列表
			await getComments()
			
			uni.showToast({
				title: '评论成功',
				icon: 'success'
			})
		} else {
			console.error('评论提交失败:', response)
			uni.showToast({
				title: response?.message || '评论失败，请重试',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('提交评论失败:', error)
		uni.showToast({
			title: '网络错误，请稍后重试',
			icon: 'none'
		})
	}
}

// 格式化日期
const formatDate = (dateString) => {
	if (!dateString) return '未知时间'
	const date = new Date(dateString)
	const now = new Date()
	const diff = now - date
	
	// 小于1分钟
	if (diff < 60 * 1000) {
		return '刚刚'
	}
	// 小于1小时
	else if (diff < 60 * 60 * 1000) {
		return `${Math.floor(diff / (60 * 1000))}分钟前`
	}
	// 小于24小时
	else if (diff < 24 * 60 * 60 * 1000) {
		return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
	}
	// 超过24小时显示具体时间
	else {
		return `${date.getMonth() + 1}月${date.getDate()}日`
	}
}

// 清理图片URL中的多余空格和反引号
const trimImageUrl = (url) => {
	if (!url) return ''
	return url.replace(/[`\s]/g, '').trim()
}
</script>

<style lang="scss" scoped>
.sight-detail-container {
	min-height: 100vh;
	background-color: #ffffff;
}

.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60vh;
}

.loading-text {
	margin-top: 20rpx;
	color: #666;
	font-size: 28rpx;
}

.error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60vh;
	padding: 40rpx;
}

.error-text {
	margin: 30rpx 0;
	color: #666;
	font-size: 32rpx;
	text-align: center;
}

.retry-btn {
	margin-top: 20rpx;
	background-color: #007aff;
	color: white;
}

.detail-content {
	background-color: #ffffff;
}

.swiper {
	height: 400rpx;
	width: 100%;
}

.swiper-image {
	width: 100%;
	height: 100%;
}

// 基本信息样式 - 按设计图片
.basic-info {
	padding: 30rpx;
	background-color: white;
	position: relative;
}

.sight-name {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.tag {
	display: inline-block;
	background-color: #E3F2FD;
	color: #1976D2;
	font-size: 24rpx;
	padding: 4rpx 20rpx;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
}

.info-row {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.info-text {
	margin-left: 15rpx;
	font-size: 28rpx;
	color: #666;
}

.price {
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	font-size: 40rpx;
	font-weight: bold;
	color: #E64340;
}

// 选项卡样式
.tabs {
	display: flex;
	border-bottom: 2rpx solid #f0f0f0;
	background-color: white;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 25rpx 0;
	font-size: 32rpx;
	color: #666;
	position: relative;
}

.tab-item.active {
	color: #007aff;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 30%;
	width: 40%;
	height: 4rpx;
	background-color: #007aff;
}

.tab-content {
	min-height: 400rpx;
}

// 介绍内容样式
.intro-content .section {
	padding: 30rpx;
	border-bottom: 20rpx solid #f5f5f5;
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.description {
	font-size: 28rpx;
	color: #666;
	line-height: 44rpx;
	white-space: pre-wrap;
}

.facilities {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.facility-item {
	display: flex;
	align-items: center;
	background-color: #f0f9ff;
	padding: 15rpx 25rpx;
	border-radius: 25rpx;
}

.facility-text {
	margin-left: 10rpx;
	font-size: 26rpx;
	color: #07C160;
}

.empty-text {
	color: #999;
	font-size: 28rpx;
	padding: 20rpx 0;
}

.notice {
	font-size: 28rpx;
	color: #666;
	line-height: 44rpx;
	white-space: pre-wrap;
}

// 门票内容样式
.ticket-content {
	padding: 30rpx;
}

.empty-tickets {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}
.ticket-item {
	display: flex;
	background-color: white;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	padding: 20rpx;
}

.ticket-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 12rpx;
}

.ticket-info {
	flex: 1;
	margin-left: 20rpx;
}

.ticket-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.ticket-rating {
	margin-bottom: 10rpx;
}

.ticket-address {
	font-size: 26rpx;
	color: #666;
	line-height: 36rpx;
}

// 评论内容样式
.comment-content {
	padding: 30rpx 20rpx;
	background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100rpx);
	box-sizing: border-box;
}

.comment-input-section {
	margin-top: 40rpx;
	margin-bottom: 20rpx;
}

.input-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	padding: 30rpx;
	border-radius: 20rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.08);
	border: 2rpx solid #f0f0f0;
	box-sizing: border-box;
}

.comment-input-header {
	display: flex;
	align-items: center;
	margin-bottom: 25rpx;
}

.user-avatar {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
	border: 3rpx solid #e3f2fd;
}

.user-info {
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 4rpx;
}

.user-tip {
	font-size: 24rpx;
	color: #999;
}

.comment-input {
	width: 100%;
	min-height: 120rpx;
	background-color: #fafbfc;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 44rpx;
	transition: all 0.3s;
	box-sizing: border-box;
}

.comment-input:focus {
	background-color: #fff;
	border-color: #007aff;
}

.input-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
}

.char-count {
	font-size: 24rpx;
	color: #999;
}

.submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
	color: white;
	font-size: 28rpx;
	font-weight: 500;
	border-radius: 50rpx;
	padding: 16rpx 40rpx;
	box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.3);
	border: none;
	transition: all 0.3s;
}

.submit-btn:active {
	transform: scale(0.95);
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
}

.submit-btn[disabled] {
	background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
	box-shadow: none;
	opacity: 0.6;
}

.comment-stats {
	display: flex;
	flex-direction: column;
	margin-bottom: 30rpx;
}

.stats-left {
	display: flex;
	align-items: center;
	padding-bottom: 20rpx;
}

.stats-count {
	margin-left: 12rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.stats-divider {
	height: 2rpx;
	background: linear-gradient(to right, #007aff 0%, transparent 100%);
}

.comments-list {
	min-height: 400rpx;
}

.comments-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	color: #666;
	font-size: 28rpx;
	gap: 20rpx;
}

.comments {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.comment-item {
	display: flex;
	background-color: white;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	border: 2rpx solid #f5f5f5;
	transition: all 0.3s;
}

.comment-item:active {
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
}

.comment-avatar {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
	border: 3rpx solid #e3f2fd;
	flex-shrink: 0;
}

.comment-body {
	flex: 1;
	margin-left: 20rpx;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.comment-username {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
}

.comment-time {
	font-size: 24rpx;
	color: #999;
	background-color: #f5f5f5;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.comment-content-text {
	font-size: 28rpx;
	color: #666;
	line-height: 44rpx;
	word-break: break-all;
}

.empty-comments {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 0;
	gap: 20rpx;
}

.empty-text {
	font-size: 32rpx;
	font-weight: 500;
	color: #999;
	margin-top: 20rpx;
}

.empty-tip {
	font-size: 26rpx;
	color: #c0c0c0;
}

.buy{
	position: fixed;
	right: 30rpx;
	bottom: 30rpx;
}
</style>
